// 登录

<template>
	<view>
		<view class="title-box">登录</view>
		<!-- 输入框 -->
		<view class="input-box">
			<icon-input label="用户名" labelStyle="width:50px" type="text" placeholder="用户名/手机号" @input="postForm.username=$event" :value="postForm.username"></icon-input>
			<icon-input label="密码" labelStyle="width:50px" type="password" placeholder="请输入密码" @input="postForm.password=$event" :value="postForm.password"></icon-input>
			<view class="input-check">
				<checkbox-group @change="radioChange">
					<checkbox size="30" active-color="#fe492f" label-size="24" :value="false">
						<text style="color: #999">登录即代表阅读并同意</text>
					</checkbox>
				</checkbox-group>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-box">
			<view class="btn btn1" @tap="login">立即登录</view>
			<view class="btn3">
				<text @tap="forgetPassword">忘记密码</text>
			</view>
			<view class="btn3">
				<text @tap="reg">注册</text>
			</view>
			<!-- 			<view class="btn4">
				<text @tap="demonstration">暂不登陆，进行演示</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import iconInput from "@/components/icon-input.vue"
	import {
		regPage,
		getPages
	} from '@/utils/routes'
	export default {
		components: {
			iconInput
		},
		data() {
			return {
				query: {},
				agreementChecked: true,
				postForm: {
					username: '18101326666',
					password: '123456'
				},
				code: '',
				loginFlag: false
			}
		},
		onLoad(q) {
			this.query = q
			// console.log(q)
			// 判断登录是否过期
			const token = uni.getStorageSync('token')
			const userInfo = uni.getStorageSync('userInfo')
			const timeStamp = parseInt(Date.now() / 1000)
			if (token && userInfo && timeStamp < userInfo.expiretime) {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}

			// uni.login({
			// 	provider: 'weixin',
			// 	success: (res) => {
			// 		this.code = res.code
			// 	}
			// })
		},
		methods: {
			onInput(e) {
				console.log(e)
			},
			radioChange({
				detail
			}) {
				this.agreementChecked = detail.value.length > 0
			},
			// 立即登录
			async login() {
				if (!this.agreementChecked) {
					return uni.showToast({
						title: '请阅读并勾选协议',
						icon: 'none'
					})
				}

				if (!this.postForm.username) {
					return uni.showToast({
						title: '请输入用户名或手机号',
						icon: 'none'
					})
				}

				if (!this.postForm.password) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}

				const res = await this.$http.post('/api/user/login', this.postForm)
				if (res.code == 0) {
					return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success',
						mask: true
					})
					// const res2 = await this.$http.post('/api/user/getUserinfo', {token:res.data.token})
					// console.log(res2)
					var data = {
						loginFlag: true,
						// userInfo: res.data.Userinfo,
						token: res.data,
						params: this.query
					}
					this.$store.dispatch("setData", data)
					const res2 = await this.$http.post('/api/user/getUserinfo', {})
					console.log(res2)
					if (res2.code == 200) {
						this.$store.dispatch("setData", {
							userInfo: res2.data
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}
			},
			reg() {
				regPage(this.options)
			},
			// 忘记密码
			forgetPassword() {
				if (!this.agreementChecked) {
					return uni.showToast({
						title: '请阅读并勾选协议',
						icon: 'none'
					})
				}

				uni.navigateTo({
					url: '/pages/my/commonFunction/accountManagement/changePassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		margin: 80rpx 60rpx 52rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #111111;
	}

	.u-checkbox {
		.u-checkbox__label {
			margin-right: 0;
		}
	}

	// 输入框
	.input-box {
		.input-check {
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			padding-left: 60rpx;

			view {
				font-size: 24rpx;
				color: #999;

				text {
					color: #fe492f;
				}
			}
		}
	}

	// 按钮
	.btn-box {
		margin: 0 auto;
		width: 630rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			border-radius: 50rpx;
			font-size: 36rpx;
			font-weight: 500;

			&.btn1 {
				margin: 82rpx 0 40rpx;
				color: #ffffff;
				background: #fe492f;
			}

			&.btn2 {
				margin-bottom: 60rpx;
				color: #fe492f;
				border: 1px solid #fe492f;

				.t-icon-weixin {
					margin-right: 12rpx;
					width: 46rpx;
					height: 46rpx;
				}
			}
		}

		.btn3 {
			display: flex;
			justify-content: center;
			color: #fe492f;

			text {}
		}

		.btn4 {
			position: absolute;
			bottom: 120rpx;
			color: #fe492f;
			left: 50%;
			transform: translateX(-50%);

			text {
				font-weight: 400;
				font-size: 28rpx;
			}
		}
	}
</style>